<div id="travelingdatarecorder" class="full" style="padding: 10px;">
    <div class="demo-spin-container" v-if="loading">
        <Spin size="large" fix></Spin>
    </div>
    <div class="demo-spin-container" v-if="batchSendCmdLoading">
        <Spin fix>
            <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
            <div>{{$t("bgMgr.sending")}}:{{idx}}/{{tableData.length}}</div>
        </Spin>
    </div>
    <div class="full">
        <div style="display: flex;flex-direction: row;height: 30px; line-height: 30px;">
            <div style="padding: 0 10px;width: 320px;">
                {{$t("bgMgr.allAevcieList")}}
            </div>
            <div style="flex: 1;">
                {{$t("bgMgr.selectedDeviceList")}} {{tableData.length}}
                <i-button type="error" size="small" @click="clearTableData" style="float: right;margin: 3px 0px 0 0;">{{$t("insure.deselectAll")}}</i-button>
            </div>
            <div style="padding: 0 20px;width:400px;">
                <div v-show="curruntRow.deviceid">
                    <span v-text="curruntRow.devicename"></span>
                    <span>-</span>
                    <span v-text="curruntRow.deviceid"></span>
                </div>
            </div>
        </div>
        <div style="display: flex;flex-direction: row;position: absolute;left: 0;right: 0;bottom: 0;top: 40px;">
            <div style="padding: 0 10px;width: 320px;">
                <div class="icon_example" style="text-align: center;">
                    <span class="user_icon"></span><span>{{$t("bgMgr.user")}}</span>
                    <span class="group_icon"></span><span>{{$t("bgMgr.group")}}</span>
                    <span class="device_icon"></span><span>{{$t("bgMgr.ordinaryDev")}}</span>
                    <span class="video_icon"></span><span>{{$t("bgMgr.videoDev")}}</span>
                </div>
                <div style="line-height: 35px;">
                    <i-input v-model.trim="searchDeviceVal" icon="ios-close-circle-outline" @on-click="cleanValue" style="width: 100%;" icon="search"></i-input>
                </div>
                <div :style="streeStyle">
                    <ul id="ztree" class="ztree"></ul>
                </div>
            </div>
            <div style="padding: 0 10px;width: 500px;flex: 1;">
                <i-table border ref="table" :columns="columns" :data="tableData" :height="taleHeight" highlight-row @on-current-change="onCurrentChange"></i-table>
            </div>
            <div style="padding: 0 10px;width:400px;">
                <div style="height: 40%;overflow-y: auto;border: 1px solid #DCDEE2;padding:5px 12px;">
                    <Radio-Group v-model="curruntCmdType" vertical>
                        <template v-for="(item,index) in treeGroupList">
                            <Radio :label="item.cmdType" style="vertical-align:middle;">
                                <span v-text="item.title" style="font-size: 14px;vertical-align:top;"></span>
                            </Radio> 
                        </template>
                    </Radio-Group>
                </div>
                <div style="height: 60%;padding: 5px 0px;">
                    <div style="height: 100%;border: 1px solid #DCDEE2;">
                        <Row style="margin: 5px 0">
                            <i-col span="7" style="height: 100%;text-align:right;line-height:32px;">
                                &nbsp;{{isZh?'更新时间':'Update Time'}} : &nbsp;
                            </i-col>
                            <i-col span="12">
                                <i-input v-model.trim="updateTimeStr" disabled></i-input>
                            </i-col>
                        </Row>
                        <div v-if="curruntCmdType=='00H'">
                            <Row style="margin: 5px 0">
                                <i-col span="7" style="height: 100%;text-align:right;line-height:32px;">
                                    &nbsp;{{isZh?'标准执行年号':'Year standard'}} : &nbsp;
                                </i-col>
                                <i-col span="12">
                                    <i-input v-model.trim="recordVersion"></i-input>
                                </i-col>
                            </Row>
                            <Row style="margin: 5px 0">
                                <i-col span="7" style="height: 100%;text-align:right;line-height:32px;">
                                    &nbsp;{{isZh?'修改单号':'Amendment'}} : &nbsp;
                                </i-col>
                                <i-col span="12">
                                    <i-input v-model.trim="modifiedOrder"></i-input>
                                </i-col>
                            </Row>
                        </div>
                        <div v-if="curruntCmdType=='01H'">
                            <Row style="margin: 5px 0">
                                <i-col span="7" style="height: 100%;text-align:right;line-height:32px;">
                                    &nbsp;{{isZh?'驾驶证号码':"Driver's No."}} : &nbsp;
                                </i-col>
                                <i-col span="12">
                                    <i-input v-model.trim="driverLicenseNo"></i-input>
                                </i-col>
                            </Row>
                        </div>
                        <div v-if="curruntCmdType=='02H'">
                            <Row style="margin: 5px 0">
                                <i-col span="7" style="height: 100%;text-align:right;line-height:32px;">
                                    &nbsp;{{isZh?'当前时间':'Current Time'}} : &nbsp;
                                </i-col>
                                <i-col span="12">
                                    <Date-Picker type="datetime" v-model="realtime"></Date-Picker>
                                </i-col>
                            </Row>
                        </div>
                        <div v-if="curruntCmdType=='03H'">
                            <Row style="margin: 5px 0">
                                <i-col span="7" style="height: 100%;text-align:right;line-height:32px;">
                                    &nbsp;{{isZh?'当前时间':'Current Time'}} : &nbsp;
                                </i-col>
                                <i-col span="12">
                                    <i-input v-model.trim="realTimeClock"></i-input>
                                </i-col>
                            </Row>
                            <Row style="margin: 5px 0">
                                <i-col span="7" style="height: 100%;text-align:right;line-height:32px;">
                                    &nbsp;{{isZh?'安装时间':'Install Time'}} : &nbsp;
                                </i-col>
                                <i-col span="12">
                                    <i-input v-model.trim="setupDateTime"></i-input>
                                </i-col>
                            </Row>
                            <Row style="margin: 5px 0">
                                <i-col span="7" style="height: 100%;text-align:right;line-height:32px;">
                                    &nbsp;{{isZh?'初始里程':'Initial Mileage'}} : &nbsp;
                                </i-col>
                                <i-col span="12">
                                    <Input-Number :min="0" v-model="beginMileage" style="width: 100%;"></Input-Number>
                                </i-col>
                            </Row>
                            <Row style="margin: 5px 0">
                                <i-col span="7" style="height: 100%;text-align:right;line-height:32px;">
                                    &nbsp;{{isZh?'累积里程':'Accumulated mileage'}} : &nbsp;
                                </i-col>
                                <i-col span="12">
                                    <Input-Number :min="0" v-model="endMileage" style="width: 100%;"></Input-Number>
                                </i-col>
                            </Row>
                        </div>
                        <div v-if="curruntCmdType=='04H'">
                            <Row style="margin: 5px 0">
                                <i-col span="7" style="height: 100%;text-align:right;line-height:32px;">
                                    &nbsp;{{isZh?'当前时间':'Current Time'}} : &nbsp;
                                </i-col>
                                <i-col span="12">
                                    <i-input v-model.trim="realTimeClock"></i-input>
                                </i-col>
                            </Row>
                            <Row style="margin: 5px 0">
                                <i-col span="7" style="height: 100%;text-align:right;line-height:32px;">
                                    &nbsp;{{isZh?'脉冲系数':'Pulse Coefficient'}} : &nbsp;
                                </i-col>
                                <i-col span="12">
                                    <i-input v-model.trim="pulseFactor"></i-input>
                                </i-col>
                            </Row>
                        </div>
                        <div v-if="curruntCmdType=='05H'">
                            <Row style="margin: 5px 0">
                                <i-col span="7" style="height: 100%;text-align:right;line-height:32px;">
                                    &nbsp;{{isZh?'车辆识别代号':'Identification Code'}} : &nbsp;
                                </i-col>
                                <i-col span="12">
                                    <i-input v-model.trim="vin"></i-input>
                                </i-col>
                            </Row>
                            <Row style="margin: 5px 0">
                                <i-col span="7" style="height: 100%;text-align:right;line-height:32px;">
                                    &nbsp;{{isZh?'车辆号码':'Vehicle Number'}} : &nbsp;
                                </i-col>
                                <i-col span="12">
                                    <i-input v-model.trim="vehicleNumber"></i-input>
                                </i-col>
                            </Row>
                            <Row style="margin: 5px 0">
                                <i-col span="7" style="height: 100%;text-align:right;line-height:32px;">
                                    &nbsp;{{isZh?'车辆分类':'Vehicle Classification'}} : &nbsp;
                                </i-col>
                                <i-col span="12">
                                    <i-input v-model.trim="classificationOfVehicle"></i-input>
                                </i-col>
                            </Row>
                        </div>
                        <div v-if="curruntCmdType=='06H'">
                            <Row style="margin: 5px 0">
                                <i-col span="7" style="height: 100%;text-align:right;line-height:32px;">
                                    &nbsp;{{isZh?'当前时间':'Current Time'}} : &nbsp;
                                </i-col>
                                <i-col span="12">
                                    <i-input v-model.trim="realTimeClock"></i-input>
                                </i-col>
                            </Row>
                            <Row style="margin: 5px 0">
                                <i-col span="7" style="height: 100%;text-align:right;line-height:32px;">
                                    &nbsp;{{isZh ?'内容':'Content'}} : &nbsp;
                                </i-col>
                                <i-col span="12">
                                    <i-input v-model.trim="content"></i-input>
                                </i-col>
                            </Row>
                            <Row style="margin: 5px 0">
                                <i-col span="7" style="height: 100%;text-align:right;line-height:32px;">
                                    &nbsp;{{isZh?'状态信号':'Signal'}} : &nbsp;
                                </i-col>
                                <i-col span="12">
                                    <i-input v-model.trim="state"></i-input>
                                </i-col>
                            </Row>
                        </div>
                        <div v-if="curruntCmdType=='07H'">
                            <Row style="margin: 5px 0">
                                <i-col span="7" style="height: 100%;text-align:right;line-height:32px;">
                                    &nbsp;{{isZh?'3C认证代码':'3C Code'}} : &nbsp;
                                </i-col>
                                <i-col span="12">
                                    <i-input v-model.trim="cCCcode"></i-input>
                                </i-col>
                            </Row>
                            <Row style="margin: 5px 0">
                                <i-col span="7" style="height: 100%;text-align:right;line-height:32px;">
                                    &nbsp;{{isZh?'认证产品型号':'Model'}} : &nbsp;
                                </i-col>
                                <i-col span="12">
                                    <i-input v-model.trim="certifiedProductModel"></i-input>
                                </i-col>
                            </Row>
                            <Row style="margin: 5px 0">
                                <i-col span="7" style="height: 100%;text-align:right;line-height:32px;">
                                    {{isZh?'记录仪生产日期':'Date Of Birth'}}:
                                </i-col>
                                <i-col span="12">
                                    <i-input v-model.trim="productDateTime"></i-input>
                                </i-col>
                            </Row>
                            <Row style="margin: 5px 0">
                                <i-col span="7" style="height: 100%;text-align:right;line-height:32px;">
                                    {{isZh?'产品生产流水号':'Serial number'}}:
                                </i-col>
                                <i-col span="12">
                                    <i-input v-model.trim="productSerialNumber"></i-input>
                                </i-col>
                            </Row>
                            <Row style="margin: 5px 0">
                                <i-col span="7" style="height: 100%;text-align:right;line-height:32px;">
                                    &nbsp;{{isZh?'备用':'Spare'}} : &nbsp;
                                </i-col>
                                <i-col span="12">
                                    <i-input v-model.trim="productOther"></i-input>
                                </i-col>
                            </Row>
                        </div>
                        <div v-if="curruntCmdType=='08H'||curruntCmdType=='09H'||curruntCmdType=='10H'||curruntCmdType=='11H'||curruntCmdType=='12H'||curruntCmdType=='13H'||curruntCmdType=='14H'">
                            <Row style="margin: 5px 0">
                                <i-col span="7" style="height: 100%;text-align:right;line-height:32px;">
                                    &nbsp;{{isZh?'开始时间':'Start Time'}} : &nbsp;
                                </i-col>
                                <i-col span="12">
                                    <Date-Picker type="datetime" v-model="startDateTime"></Date-Picker>
                                </i-col>
                            </Row>
                            <Row style="margin: 5px 0">
                                <i-col span="7" style="height: 100%;text-align:right;line-height:32px;">
                                    &nbsp;{{isZh? '结束时间':'End Time'}} : &nbsp;
                                </i-col>
                                <i-col span="12">
                                    <Date-Picker type="datetime" v-model="endDateTime"></Date-Picker>
                                </i-col>
                            </Row>
                            <Row style="margin: 5px 0">
                                <i-col span="7" style="height: 100%;text-align:right;line-height:32px;">
                                    &nbsp;{{isZh?'模块数(分钟)':'Modules(min)'}} : &nbsp;
                                </i-col>
                                <i-col span="12">
                                    <Input-Number :min="1" :max="30" v-model="modulesNumber"></Input-Number>
                                </i-col>
                            </Row>
                            <i-table border :columns="deviceInfoColumns" height="200" :data="deviceInfoData"></i-table>
                        </div>
                        <div v-if="curruntCmdType=='15H'">
                            <Row style="margin: 5px 0">
                                <i-col span="7" style="height: 100%;text-align:right;line-height:32px;">
                                    &nbsp;{{isZh?'初次安装日期':'Install Date'}} : &nbsp;
                                </i-col>
                                <i-col span="12">
                                    <Date-Picker type="date" v-model="setuptime"></Date-Picker>
                                </i-col>
                            </Row>
                        </div>
                        <Row style="margin: 5px 0">
                            <i-col span="24" style="text-align: center;">
                                <i-button @click="onCollection(1)" v-show="curruntCmdType!='15H'">{{isZh?'采集':'Collection'}}</i-button>
                                <i-button @click="onRefresh" v-show="curruntCmdType!='15H'">{{isZh?'刷新':'Refresh'}}</i-button>
                                <i-button @click="onSetDataInfo" v-show="isShowSetBtn">{{isZh?'设置':'Set Up'}}</i-button>
                            </i-col>
                        </Row>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    vueInstanse = new Vue({
        el: "#travelingdatarecorder",
        i18n: utils.getI18n(),
        data: {
            isZh: isZh,
            updateTimeStr: '',
            // 0
            recordVersion: '',
            modifiedOrder: '',
            // 1
            driverLicenseNo: '',
            // 2
            realtime: '',
            // 3
            beginMileage: '',
            endMileage: '',
            realTimeClock: "",
            setupDateTime: "",
            // 4
            pulseFactor: '',
            // realTimeClock: "",
            // 5
            classificationOfVehicle: "",
            vehicleNumber: "",
            vin: "",
            // 6
            content: "",
            state: '',
            // realTimeClock: "",
            // 7
            cCCcode: '',
            certifiedProductModel: '',
            productDateTime: '',
            productSerialNumber: '',
            productOther: '',

            // 8 - 14
            startDateTime: new Date(Date.now() - 3600 * 1000),
            endDateTime: new Date(),
            modulesNumber: 10,
            //15 
            setuptime: new Date(),

            loading: false,
            userType: localStorage.getItem('userType'),
            batchSendCmdLoading: false,
            idx: 0,
            curruntCmdType: '00H',
            expirationDate: new Date(),
            resetpasswordtype: '1',
            deviceType: '',
            deviceTypeList: [],
            deviceid: '',
            searchDeviceVal: '',
            searchDeviceList: [],
            deviceInfoColumns: [],
            deviceInfoData: [],
            treeGroupList: [{
                title: '00H-' + (isZh ? "采集记录仪执行标准版本" : "Collect the Device Version"),
                cmdType: '00H',
            }, {
                title: '01H-' + (isZh ? "采集当前驾驶人信息" : "Collect the Driver Info"),
                cmdType: '01H',
            }, {
                title: '02H-' + (isZh ? "采集/设置记录仪实时时间" : "Collect/Set Time"),
                cmdType: '02H',
            }, {
                title: '03H-' + (isZh ? "采集/设置累计行驶里程" : "Collect/Set Mileage"),
                cmdType: '03H',
            }, {
                title: '04H-' + (isZh ? "采集/设置记录仪脉冲系数" : "Collect/Set A/D Value"),
                cmdType: '04H',
            }, {
                title: '05H-' + (isZh ? "采集/设置车辆信息" : "Collect/Set Vehicle Info"),
                cmdType: '05H',
            }, {
                title: '06H-' + (isZh ? "采集/设置记录仪状态信号配置信息" : "Collect/Set I/O Status Info"),
                cmdType: '06H',
            }, {
                title: '07H-' + (isZh ? "采集记录仪唯一性编号" : "Collect the ID./IMEI"),
                cmdType: '07H',
            }, {
                title: '08H-' + (isZh ? "采集指定的行驶速度记录" : "Collect the Speed Records"),
                cmdType: '08H',
            }, {
                title: '09H-' + (isZh ? "采集指定的位置信息记录" : "Collect the Location Records"),
                cmdType: '09H',
            }, {
                title: '10H-' + (isZh ? "采集指定的疑点事故记录" : "Collect the Accident Records"),
                cmdType: '10H',
            }, {
                title: '11H-' + (isZh ? "采集指定的超时驾驶记录" : "Collect the Overspeed Records"),
                cmdType: '11H',
            }, {
                title: '12H-' + (isZh ? "采集指定的驾驶人身份记录" : "Collect the Driver ID info"),
                cmdType: '12H',
            }, {
                title: '13H-' + (isZh ? "采集指定的记录仪外部供电记录" : "Collect the External Power Records"),
                cmdType: '13H',
            }, {
                title: '14H-' + (isZh ? "采集指定的速度状态记录" : "Collect the Speed Status Records"),
                cmdType: '14H',
            }, {
                title: '15H-' + (isZh ? "设置初次安装日期" : "Set Installation Date"),
                cmdType: '15H',
            }],
            tableData: [],
            mileageRatio: 100,
            columns: [{
                type: 'index',
                width: 60,
            }, {
                title: vRoot.$t('alarm.devName'),
                key: 'devicename'
            }, {
                title: vRoot.$t('alarm.devNum'),
                key: 'deviceid',
            }, {
                title: vRoot.$t('alarm.action'),
                width: 85,
                render: function(h, params) {
                    return h('Button', {
                        props: {
                            type: 'error',
                            size: 'small'
                        },
                        style: {
                            marginRight: '5px'
                        },
                        on: {
                            click: function(event) {
                                event.stopPropagation();
                                event.preventDefault();
                                var row = vueInstanse.tableData.splice(params.index, 1)[0];

                                if (row && vueInstanse.curruntRow && row.deviceid === vueInstanse.curruntRow.deviceid) {
                                    vueInstanse.curruntRow = {
                                        deviceid: ''
                                    };
                                }
                            }
                        }
                    }, vRoot.$t('insure.deselect'))
                }
            }, {
                title: vRoot.$t('bgMgr.result'),
                width: 90,
                render: function(h, params) {
                    var result = '',
                        color = '',
                        resultType = params.row.resultType;
                    if (resultType === 0) {
                        color = "#2D8CF0";
                        result = vRoot.$t('device.actionSucc');
                    } else {
                        color = "#E4393C";
                        result = params.row.resultCause;
                    }
                    return h('span', {
                        style: {
                            color: color
                        }
                    }, result);
                }
            }],
            selectedGroupId: null,
            selectedGroupName: null,
            selectedUserName: null,
            taleHeight: 100,
            curruntRow: {
                deviceid: "",
                devicename: ''
            }
        },
        methods: {
            clearTableData: function() {
                this.curruntRow = {
                    deviceid: "",
                    devicename: ''
                };
                this.tableData = [];
            },
            onRefresh: function() {
                if (this.curruntRow) {
                    this.onCurrentChange(this.curruntRow)
                } else {
                    this.$Message.error(isZh ? '请选择一个设备' : 'Please select a device');
                }
            },
            onCurrentChange: function(curruntRow) {
                this.curruntRow = curruntRow;
                var me = this;
                var url = myUrls.queryRecorderData();
                var data = {
                    recordercommand: this.getRecorderCommand(1),
                    deviceid: curruntRow.deviceid
                }
                utils.sendAjax(url, data, function(resp) {
                    if (resp.status == 0) {
                        var recorderData = JSON.parse(resp.recorderdata);
                        me.updateTimeStr = DateFormat.longToLocalDateTimeStr(resp.updatetime)
                        me.setRecorderData(recorderData);
                        me.$Message.success(isZh ? '刷新成功' : 'Refresh succeeded');
                    } else {
                        // me.$Message.error('查询失败');
                    }
                });
            },

            getRecorderCommand: function(type) {
                var cmd = 0x00;
                switch (this.curruntCmdType) {
                    case '00H':
                        cmd = 0x00;
                        break;
                    case '01H':
                        cmd = 0x01;
                        break;
                    case '02H':
                        cmd = type == 1 ? 0x02 : 0xC2;
                        break;
                    case '03H':
                        cmd = type == 1 ? 0x03 : 0xC4;
                        break;
                    case '04H':
                        cmd = type == 1 ? 0x04 : 0xC3;
                        break;
                    case '05H':
                        cmd = type == 1 ? 0x05 : 0x82;
                        break;
                    case '06H':
                        cmd = type == 1 ? 0x06 : 0x84;
                        break;
                    case '07H':
                        cmd = 0x07;
                        break;
                    case '08H':
                        cmd = 0x08;
                        break;
                    case '09H':
                        cmd = 0x09;
                        break;
                    case '10H':
                        cmd = 0x10;
                        break;
                    case '11H':
                        cmd = 0x11;
                        break;
                    case '12H':
                        cmd = 0x12;
                        break;
                    case '13H':
                        cmd = 0x13;
                        break;
                    case '14H':
                        cmd = 0x14;
                        break;
                    case '15H':
                        cmd = 0x83;
                        break;
                }
                return cmd;
            },
            getRecorderData: function() {
                var dataStr = null;
                switch (this.curruntCmdType) {
                    case '00H':
                        dataStr = null;
                        break;
                    case '01H':
                        dataStr = null;
                        break;
                    case '02H':
                        dataStr = JSON.stringify({
                            realtime: this.realtime.getTime(),
                            offset: timeDifference
                        });
                        break;
                    case '03H':
                        dataStr = JSON.stringify({
                            beginMileage: this.beginMileage
                        });
                        break;
                    case '04H':
                        dataStr = JSON.stringify({
                            pulseFactor: this.pulseFactor,
                        });
                        break;
                    case '05H':
                        dataStr = JSON.stringify({
                            vin: this.vin,
                            vehicleNumber: this.vehicleNumber,
                            classificationOfVehicle: this.classificationOfVehicle,
                        });
                        break;
                    case '06H':
                        // dataStr = JSON.stringify({
                        //     state:this.state,
                        //     content:this.content,
                        //     // realTimeClock:this.realTimeClock,
                        // });
                        break;
                    case '07H':
                        dataStr = null;
                        break;
                    case '15H':
                        dataStr = JSON.stringify({
                            setuptime: this.setuptime.getTime(),
                            offset: timeDifference
                        });
                        break;
                    default:
                        var daya = {
                            begintime: this.startDateTime.getTime(),
                            endtime: this.endDateTime.getTime(),
                            offset: timeDifference,
                            maxnumber: this.modulesNumber,
                        }
                        dataStr = JSON.stringify(daya);
                }
                return dataStr;
            },
            setRecorderData: function(recorderData) {
                console.log(recorderData);
                switch (this.curruntCmdType) {
                    case '00H':
                        this.recordVersion = recorderData.recordVersion;
                        this.modifiedOrder = recorderData.modifiedOrder;
                        break;
                    case '01H':
                        this.driverLicenseNo = recorderData.driverLicenseNo;
                        break;
                    case '02H':
                        this.realtime = new Date(recorderData.realTimeClock);
                        break;
                    case '03H':
                        this.setupDateTime = recorderData.setupDateTime;
                        this.realTimeClock = recorderData.realTimeClock;
                        this.endMileage = recorderData.endMileage;
                        this.beginMileage = recorderData.beginMileage;
                        break;
                    case '04H':
                        this.pulseFactor = recorderData.pulseFactor;
                        this.realTimeClock = recorderData.realTimeClock;
                        break;
                    case '05H':
                        this.classificationOfVehicle = recorderData.classificationOfVehicle;
                        this.vehicleNumber = recorderData.vehicleNumber;
                        this.vin = recorderData.vin;
                        break;
                    case '06H':
                        this.content = recorderData.content;
                        this.realTimeClock = recorderData.realTimeClock;
                        this.state = recorderData.state;
                        break;
                    case '07H':
                        this.cCCcode = recorderData.cCCcode;
                        this.certifiedProductModel = recorderData.certifiedProductModel;
                        this.productDateTime = recorderData.productDateTime;
                        this.productSerialNumber = recorderData.productSerialNumber;
                        this.productOther = recorderData.productOther;
                        break;
                    case '08H':
                        var tableData08H = [];
                        var minutes = recorderData.minutes
                        minutes.forEach(function(mItem) {
                            var realTimeClock = mItem.realTimeClock;
                            mItem.seconds.forEach(function(sItem, index) {
                                sItem.time = realTimeClock;
                                sItem.second = index;
                                tableData08H.push(sItem);
                            })
                        });
                        this.deviceInfoData = tableData08H;
                        break;
                    case '09H':
                        var tableData09H = [];
                        var hours = recorderData.hours
                        hours.forEach(function(mItem) {
                            var realTimeClock = mItem.realTimeClock;
                            mItem.minutes.forEach(function(sItem, index) {
                                sItem.time = realTimeClock;
                                sItem.second = index;
                                tableData09H.push(sItem);
                            })
                        });
                        this.deviceInfoData = tableData09H;
                        break;
                    case '10H':
                        var tableData10H = [];
                        var doubts = recorderData.doubts
                        doubts.forEach(function(mItem) {
                            var realTimeClock = mItem.realTimeClock;
                            mItem.records.forEach(function(sItem, index) {
                                sItem.time = realTimeClock;
                                sItem.second = index;
                                tableData10H.push(sItem);
                            })
                        });
                        this.deviceInfoData = tableData10H;
                        break;
                    case '11H':

                        break;
                    case '12H':

                        break;
                    case '13H':

                        break;
                    case '14H':

                        break;
                    case '15H':

                        break;
                }
            },
            getCmdTypeData: function(type) {
                var data = {
                    deviceids: [],
                    action: 'recorder',
                    recorderaction: type,
                    recordercommand: this.getRecorderCommand(type),
                    recorderdata: null,
                };
                if (type == 2) {
                    data.recorderdata = this.getRecorderData(type);
                }
                this.tableData.forEach(function(item) {
                    data.deviceids.push(item.deviceid);
                });
                return data;
            },
            onCollection: function(type) {
                var me = this;
                var data = this.getCmdTypeData(type);
                if (data.deviceids.length == 0) {
                    me.$Message.error(isZh ? '请选择设备' : 'Please select a device');
                    return;
                }
                var url = myUrls.batchOperate();

                utils.sendAjax(url, data, function(respData) {
                    if (respData.status === 0) {
                        // if (respData.total == respData.success) {
                        //     me.$Message.success(vRoot.$t('device.actionSucc'));
                        // } else {
                        //     me.$Message.error(vRoot.$t('message.changeFail') + ' : ' + respData.fail);
                        // }
                        me.updatedActionState(respData.errorrecords);
                    } else {
                        me.$Message.error(respData.cause);
                    }
                });


            },
            onSetDataInfo: function() {
                var me = this;
                if (!this.curruntRow) {
                    me.$Message.error('请选择一个设备');
                    return;
                };
                var data = {
                    deviceids: [this.curruntRow.deviceid],
                    action: 'recorder',
                    recorderaction: 2,
                    recordercommand: this.getRecorderCommand(2),
                    recorderdata: this.getRecorderData(),
                };
                var url = myUrls.batchOperate();
                utils.sendAjax(url, data, function(respData) {
                    me.updatedActionState(respData.errorrecords);
                });
            },
            updatedActionState: function(errorrecords) {
                console.log(errorrecords);
                this.tableData.forEach(function(item) {
                    var isErr = false;
                    for (var i = 0; i < errorrecords.length; i++) {
                        var errItem = errorrecords[i];
                        if (item.deviceid == errItem.deviceid) {
                            item.resultType = errItem.status;
                            item.resultCause = errItem.cause;
                            isErr = true;
                        }
                    }
                    if (isErr == false) {
                        item.resultType = 0;
                    }
                })
            },
            onCheckChange: function(selectArr) {
                var me = this;
                var tableData = [];
                selectArr.forEach(function(item) {
                    var deviceid = item.deviceid;
                    if (deviceid && !me.isRepeatAddDevice(deviceid)) {
                        utils.deviceInfos[deviceid].resultType = 2;
                        tableData.push(utils.deviceInfos[deviceid]);
                    }
                })

                var newArr = this.tableData.concat(tableData);
                if (newArr.length > 500) {
                    newArr = newArr.slice(0, 500);
                }
                this.tableData = newArr;

                setTimeout(function() {
                    if (tableData.length) {
                        me.$refs.table.$refs.tbody.clickCurrentRow(0);
                    }
                }, 500)
            },
            isRepeatAddDevice: function(deviceid) {
                var relsut = false;
                for (var i = 0; i < this.tableData.length; i++) {
                    var item = this.tableData[i];
                    if (item.deviceid == deviceid) {
                        relsut = true;
                        break;
                    }
                }
                return relsut;
            },
            queryDevicesTree: function() {
                var me = this;
                this.loading = true;
                GlobalOrgan.getInstance().getGlobalOrganData(function(rootuser) {
                    me.loading = false;
                    me.setTreeDataList(rootuser);
                })
            },
            setTreeDataList: function(rootuser) {
                this.treeDeviceList = [this.castUsersTreeToDevicesTree(rootuser, true, false)];
                var me = this;
                this.setting = {
                    check: {
                        enable: true,
                        chkStyle: "checkbox",
                        chkboxType: {
                            "Y": "ps",
                            "N": "ps"
                        }
                    },
                    callback: {
                        onCheck: function(id, ztree) {
                            var checkedNodes = me.zTreeObj.getCheckedNodes();
                            me.onCheckChange(checkedNodes);
                        }
                    }
                };
                this.zTreeObj = $.fn.zTree.init($("#ztree"), this.setting, this.treeDeviceList);
            },
            filtered: function(textStr) {
                function uniq(array) {
                    var temp = [];
                    for (var i = 0; i < array.length; i++) {
                        if (temp.indexOf(array[i]) == -1) {
                            temp.push(array[i]);
                        }
                    }
                    return temp;
                }
                var newArr = [];
                textStr.split("\n").forEach(function(item) {
                    if (item) {
                        newArr.push(item);
                    }
                })
                return uniq(newArr);
            },
            getDeviceListGroups: function(groups, isNeedDevice, username, isNeedRadio) {
                var groupsList = [],
                    me = this;
                if (groups != null) {
                    for (var i = 0; i < groups.length; ++i) {
                        var group = groups[i];
                        var groupObj = {
                            groupid: group.groupid,
                            name: group.groupname,
                            icon: myUrls.viewhost + "zTreeStyle/img/diy/group.svg"
                        }
                        if (isNeedDevice) {
                            groupObj.render = utils.renderGroup;

                        } else {
                            groupObj.totalCount = group.devices.length;
                            groupObj.name = group.groupname + '(' + group.devices.length + ')';
                        }
                        if (isNeedDevice && group.devices) {
                            groupObj.totalCount = group.devices.length;
                            groupObj.children = [];
                            groupObj.name = group.groupname + '(' + group.devices.length + ')';
                            group.devices.forEach(function(device) {
                                groupObj.children.push({
                                    deviceid: device.deviceid,
                                    name: device.devicename,
                                    icon: utils.getzTreeDeviceIcon(device)
                                });
                                utils.deviceInfos[device.deviceid] = {
                                    deviceid: device.deviceid,
                                    devicename: device.devicename,
                                    username: username,
                                    groupid: group.groupid,
                                    groupname: group.groupname,
                                    forwardid: device.forwardid,
                                }
                            });
                        }
                        groupsList.push(groupObj);
                    }
                }

                if (groupsList.length == 0) {
                    groupsList.push({
                        name: 'Default(0)',
                        groupid: 0,
                        totalCount: 0,
                        children: [],
                        icon: myUrls.viewhost + "zTreeStyle/img/diy/group.svg"
                    });
                }
                return groupsList;

            },
            doCastUsersTreeToDevicesTree: function(usersTrees, isNeedDevice, isNeedRadio) {
                var devicesTreeRecord = [];
                if (usersTrees != null && usersTrees.length > 0) {
                    for (var i = 0; i < usersTrees.length; ++i) {
                        var usersTree = usersTrees[i];
                        var username = usersTree.username;
                        var subusers = usersTree.subusers;
                        var currentsubDevicesTreeRecord = {
                            name: username,
                            username: username,
                            nocheck: isNeedRadio,
                            icon: myUrls.viewhost + "zTreeStyle/img/diy/account.svg"
                        };
                        var deviceListGroups = this.getDeviceListGroups(usersTree.groups, isNeedDevice, username, isNeedRadio);
                        if (username != null && subusers != null && subusers.length > 0) {
                            var subDevicesTreeRecord = this.doCastUsersTreeToDevicesTree(subusers, isNeedDevice, isNeedRadio);
                            subDevicesTreeRecord = deviceListGroups.concat(subDevicesTreeRecord);
                            currentsubDevicesTreeRecord.children = subDevicesTreeRecord;
                        } else {
                            currentsubDevicesTreeRecord.children = deviceListGroups;

                        }
                        var totalCount = 0;
                        if (currentsubDevicesTreeRecord.children) {
                            for (var j = 0; j < currentsubDevicesTreeRecord.children.length; ++j) {
                                totalCount += currentsubDevicesTreeRecord.children[j].totalCount;
                            }
                        }
                        currentsubDevicesTreeRecord.totalCount = totalCount;
                        currentsubDevicesTreeRecord.name = username + "(" + totalCount + ")";
                        devicesTreeRecord.push(currentsubDevicesTreeRecord);
                    }
                }
                return devicesTreeRecord;
            },
            cleanValue: function() {
                this.searchDeviceVal = '';
            },
            castUsersTreeToDevicesTree: function(devicesTreeRecord, isNeedDevice, isNeedRadio) {
                var iViewTree = {
                    open: true,
                    nocheck: isNeedRadio,
                    icon: myUrls.viewhost + "zTreeStyle/img/diy/1_open.png"
                };
                if (devicesTreeRecord != null) {
                    var username = devicesTreeRecord.username;
                    var subusers = devicesTreeRecord.subusers;
                    iViewTree.name = username;
                    iViewTree.username = username;
                    var deviceListGroups = this.getDeviceListGroups(devicesTreeRecord.groups, isNeedDevice, username, isNeedRadio);
                    if (username != null && subusers != null && subusers.length > 0) {
                        var subDevicesTreeRecord = this.doCastUsersTreeToDevicesTree(subusers, isNeedDevice, isNeedRadio);
                        iViewTree.children = deviceListGroups.concat(subDevicesTreeRecord);
                    } else {
                        iViewTree.children = deviceListGroups;
                    }
                    var totalCount = 0;
                    if (iViewTree.children) {
                        for (var i = 0; i < iViewTree.children.length; ++i) {
                            totalCount += iViewTree.children[i].totalCount;
                        }
                    }
                    iViewTree.name = username + "(" + totalCount + ")";
                }
                return iViewTree;
            },

            calcTableHeight: function() {
                var wHeight = window.innerHeight;
                if (wHeight < 760) {
                    wHeight = 760;
                }
                this.taleHeight = wHeight - 110;
            },
            getDeviceType: function() {
                var me = this;
                var url = myUrls.queryDeviceTypeByUser();
                utils.sendAjax(url, {}, function(resp) {
                    if (resp.status == 0 && resp.devicetypes != null) {
                        resp.devicetypes.forEach(function(item, index) {
                            if (index === 0) {
                                me.deviceType = item.devicetypeid;
                            }
                            me.deviceTypeList.push({
                                value: item.devicetypeid,
                                label: item.typename
                            });
                        })

                    }
                });
            },
            variableDeepSearch: function(treeDataFilter, searchWord, limitcount) {
                var childTemp = [];
                var that = this;
                for (var i = 0; i < treeDataFilter.length; i++) {
                    var copyItem = null;
                    var item = treeDataFilter[i];
                    if (item != null) {

                        var isFound = false;
                        if (item.name.indexOf(searchWord) != -1 || (item.deviceid && item.deviceid.toLowerCase().indexOf(searchWord) != -1)) {
                            copyItem = item;
                            copyItem.open = false;
                            isFound = true;
                        }
                        if (isFound == false && item.children && item.children.length > 0) {
                            // item.expand = true;
                            // childTemp.push(item);
                            var rs = that.variableDeepSearch(item.children, searchWord, limitcount);
                            if (rs && rs.length > 0) {
                                copyItem = deepClone(item);
                                copyItem.children = rs;
                                copyItem.open = true;
                                isFound = true;
                            }
                        }

                        if (isFound == true) {
                            limitcount++;
                            childTemp.push(copyItem);

                            if (limitcount > 1000) {
                                break;
                            }
                        }
                    }
                }

                return childTemp;
            }
        },
        computed: {
            streeStyle: function() {
                return {
                    'height': (this.taleHeight - 65) + 'px',
                    'overflow-y': 'auto'
                }
            },
            deviceids: function() {
                var deviceids = [];
                this.tableData.forEach(function(item) {
                    deviceids.push(item.deviceid);
                });
                return deviceids;
            },
            isShowSetBtn: function() {
                return this.curruntCmdType == '02H' || this.curruntCmdType == '03H' || this.curruntCmdType == '04H' || this.curruntCmdType == '05H' || this.curruntCmdType == '06H' || this.curruntCmdType == '15H'
            },
        },
        watch: {
            searchDeviceVal: function(newVal) {

                if (newVal === '') {
                    this.treeDeviceList[0].open = true;
                    this.zTreeObj = $.fn.zTree.init($("#ztree"), this.setting, this.treeDeviceList);
                } else {
                    var limitcount = 0;
                    newVal = newVal.toLowerCase();
                    var data = this.variableDeepSearch(this.treeDeviceList, newVal, limitcount);
                    if (data.length == 0) {
                        data.push({
                            name: isZh ? '无数据' : 'No data',
                            nocheck: true
                        })
                    }
                    this.zTreeObj = $.fn.zTree.init($("#ztree"), this.setting, data);

                }

            },
            curruntCmdType: function(newVal) {
                switch (newVal) {
                    case '08H':
                    case '10H':
                        this.deviceInfoColumns = [{
                            title: isZh ? '时间' : 'Time',
                            key: 'time',
                            width: 140,
                        }, {
                            title: isZh ? '秒' : 'Second',
                            key: 'second',
                            width: 60,
                        }, {
                            title: isZh ? '速度' : 'Speed',
                            key: 'speed',
                            width: 70,
                        }, {
                            title: isZh ? '内容' : 'Content',
                            key: 'content',
                        }];
                        break;
                    case '09H':
                        this.deviceInfoColumns = [{
                            title: isZh ? '时间' : 'Time',
                            key: 'time',
                            width: 140,
                        }, {
                            title: isZh ? '秒' : 'Second',
                            key: 'second',
                            width: 60,
                        }, {
                            title: isZh ? '经度' : 'Longitude',
                            key: 'lon'
                        }, {
                            title: isZh ? '纬度' : 'latitude',
                            key: 'lat'
                        }, {
                            title: isZh ? '速度' : 'Speed',
                            key: 'speed',
                            width: 70,
                        }, {
                            title: isZh ? '海拔' : 'Altitude',
                            key: 'altitude',
                            width: 70,
                        }];
                        break;


                    case '11H':
                        this.deviceInfoColumns = [];
                        break;
                    case '12H':
                        this.deviceInfoColumns = [{
                            title: isZh ? '时间' : 'Time',
                            key: '12'
                        }, {
                            title: isZh ? '事件类型' : 'Event Type',
                            key: '12'
                        }];
                        break;
                    case '13H':
                        this.deviceInfoColumns = [{
                            title: isZh ? '时间' : 'Time',
                            key: '12'
                        }, {
                            title: isZh ? '驾驶证' : "Driver's license",
                            key: '12'
                        }, {
                            title: isZh ? '事件类型' : 'Event Type',
                            key: '12'
                        }];
                        break;
                    case '14H':
                        this.deviceInfoColumns = [{
                            title: isZh ? '速度状态' : 'Speed state',
                            key: '12'
                        }, {
                            title: isZh ? '开始时间' : 'Start Time',
                            key: '12'
                        }, {
                            title: isZh ? '结束时间' : 'End Time',
                            key: '12'
                        }, {
                            title: isZh ? '速度' : 'Speed',
                            key: '12'
                        }, {
                            title: isZh ? '参考速度' : 'Reference Speed',
                            key: '12'
                        }];
                        break;
                }
                this.onRefresh();
            }
        },
        destroyed: function() {
            this.zTreeObj.destroy();
        },
        mounted: function() {
            var me = this;
            utils.deviceInfos = {};
            this.calcTableHeight();
            this.treeDeviceList = [];
            this.queryDevicesTree();
            this.getDeviceType();
            this.userName = userName;
            window.onresize = function() {
                me.calcTableHeight();
            }
        },
    })
</script>